<template>
	<!-- 提现 -->
	<u-popup v-model="show" mode="bottom" min-height="500px" border-radius="26" 　@close="close">
		<view class="u-padding-left-32 u-padding-right-32 pay_head u-position-relative u-flex">
			<u-icon name="arrow-left" size="32" color="#666666" @click="close"></u-icon>
			<view class="u-position-absolute header">{{title}}</view>
		</view>
		<scroll-view scroll-y="true" class="u-padding-left-32 scroll-view">
			<view>
				<view class="u-flex paycheck u-col-top u-padding-top-20" v-for="(data, index) in payList" :key="index"
					@click="payChange(data,index)">
					<u-icon name="alipay" v-if="payType==1" custom-prefix="custom-icon" color="#1296db" size="40">
					</u-icon>
					<u-icon name="weixin11" v-if="payType==2" custom-prefix="custom-icon" color="#61DC77" size="40">
					</u-icon>
					<u-icon name="yinhangqia" v-if="payType==3" custom-prefix="custom-icon" color="#FFFFFF" size="30">
					</u-icon>
					<view class="paychange u-flex u-row-between  u-padding-bottom-20 ">
						<view class="name u-flex-1">
							<view class="u-font-32">{{data.realName}}</view>
							<view class="u-font-30 u-margin-top-26">{{data.loginId}}</view>
						</view>
						<view class="check u-margin-left-20" v-if="!userPayType">
							<view v-if="index == payIndex" class="active"></view>
						</view>
						<u-icon name="close" size="28" color="#666666" v-if="userPayType==1" @click="removeItem(data)">
						</u-icon>
					</view>
				</view>
				<view class="u-flex paycheck u-margin-left-40" @click="addPay">
					<view class="paychange u-flex u-row-between u-padding-bottom-40 u-padding-top-40">
						<view class="name" v-if="!userPayType">
							<view class="u-font-32">使用新的{{name}}提现</view>
						</view>
						<view class="name" v-else>
							<view class="u-font-32">添加{{name}}账户</view>
						</view>
						<u-icon name="gengduopsd" custom-prefix="custom-icon" color="#A8A8A8" size="20"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
	export default {
		name: "allPay",
		data() {
			return {
				payIndex: 0,
				show: false
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			payType: {
				type: String | Number,
				default: ''
			},
			userPayType: {
				type: String | Number,
				default: ''
			},
			payList: {
				type: Array,
				default: () => ([])
			},
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		computed: {
			name() {
				return ['', '支付宝', '微信', '银行卡'][this.payType]
			},
			title() {
				return this.userPayType ? this.name : `选择到账${this.name}`
			},
		},
		watch: {
			visible() {
				this.show = this.visible
				if(this.show){
					//显示才设置
					this.payIndex = this.currentIndex
				}
			}
		},
		methods: {
			close() {
				this.$emit('close')
				this.$emit('update:visible', false)
			},
			payChange(item, index) {
				this.payIndex = index
				this.$emit('payUser', item)
				this.close()
			},
			// 添加账户
			addPay() {
				if (this.payType != 3) {
					this.$u.route({
						url: '/pagesB/wallet/addPay',
						params: {
							name: this.name,
							type: this.payType,
						}
					})
				} else {
					this.$u.route({
						url: '/pagesB/wallet/addCard',
					})
				}
				this.close()
			},
			//删除账户
			removeItem(item) {
				uni.showModal({
					title: '温馨提示',
					content: '是否删除该账户',
					success: ({
						confirm
					}) => {
						if (confirm) {
							this.$emit('removeItem', item.id)
						}
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	/deep/.u-drawer-content {
		background: #ECECEC;
		min-height: 500rpx;
	}

	.pay_head {
		height: 87rpx;
		border-bottom: 1rpx solid transparentize($color: #000000, $amount: 0.8);
	}

	.header {
		width: 400rpx;
		left: 50%;
		right: 50%;
		transform: translateX(-50%);
		font-weight: bold;
		text-align: center;
		line-height: 87rpx;
		font-size: 36rpx;
		top: 0;
	}

	.paycheck {
		box-sizing: border-box;

		.paychange {
			padding-right: 68rpx;
			margin-left: 48rpx;
			flex: 1;
			border-bottom: 1rpx solid transparentize($color: #000000, $amount: 0.9);

			.check {
				display: flex;
				width: 36rpx;
				height: 36rpx;
				border: 3rpx solid #A8A8A8;
				border-radius: 50%;
				align-items: center;
				justify-content: center;
				justify-items: center;
			}

			.active {
				width: 24rpx;
				height: 24rpx;
				background: #765CFE;
				border-radius: 50%;
			}
		}
	}

	.scroll-view {
		max-height: 880rpx;
	}
</style>
